<!--注册模态框组件-->
<template>
    <div>
        <a-modal v-model="visible" footer width="400px" @cancel="dianji">
            <a-tabs default-active-key="1">
                <a-tab-pane key="1" tab="普通注册">
                    <!--                    注册页表单-->
                    <a-form :form="form" @submit="handleSubmit">

                        <a-form-item v-bind="formItemLayout" label="账号" has-feedback>
                            <a-input
                                    placeholder="请输入账号"
                                    v-decorator="[
          'password',
          {
            rules: [
              {
                required: true,
                message: 'Please input your password!',
              },
              {
                validator: validateToNextPassword,
              },
            ],
          },
        ]"
                                    type="password"
                            />
                        </a-form-item>
                        <a-form-item v-bind="formItemLayout" label="密码" has-feedback >
                            <a-input
                                    placeholder="请输入密码"
                                    v-decorator="[
          'confirm',
          {
            rules: [
              {
                required: true,
                message: 'Please confirm your password!',
              },
              {
                validator: compareToFirstPassword,
              },
            ],
          },
        ]"
                                    type="password"
                                    @blur="handleConfirmBlur"
                            />
                        </a-form-item>
                        <a-form-item v-bind="formItemLayout" >
      <span slot="label">
        确认密码

      </span>
                            <a-input
                                    placeholder="请再次输入密码"
                                    v-decorator="[
          'nickname',
          {
            rules: [{ required: true, message: 'Please input your nickname!', whitespace: true }],
          },
        ]"
                            />
                        </a-form-item>


                        <a-form-item v-bind="formItemLayout" label="昵称">
                            <a-auto-complete
                                    v-decorator="['website', { rules: [{ required: true, message: 'Please input website!' }] }]"
                                    placeholder="请输入你的昵称"
                                    @change="handleWebsiteChange"
                            >
                                <template slot="dataSource">
                                    <a-select-option v-for="website in autoCompleteResult" :key="website">
                                        {{ website }}
                                    </a-select-option>
                                </template>
                                <a-input/>
                            </a-auto-complete>
                        </a-form-item>
                        <a-form-item v-bind="formItemLayout" label="手机号码">
                            <a-input
                                    v-decorator="[
          'phone',
          {
            rules: [{ required: true, message: 'Please input your phone number!' }],
          },
        ]"
                                    style="width: 100%"
                            >
                                <a-select
                                        slot="addonBefore"
                                        v-decorator="['prefix', { initialValue: '86' }]"
                                        style="width: 70px"
                                >
                                    <a-select-option value="86">
                                        +86
                                    </a-select-option>
                                    <a-select-option value="87">
                                        +87
                                    </a-select-option>
                                </a-select>
                            </a-input>
                        </a-form-item>
                        <a-form-item
                                v-bind="formItemLayout"
                                label="验证码"

                        >
                            <a-row :gutter="8">
                                <a-col :span="12">
                                    <a-input
                                            placeholder="请输入验证码"
                                            v-decorator="[
              'captcha',
              { rules: [{ required: true, message: 'Please input the captcha you got!' }] },
            ]"
                                    />
                                </a-col>
                                <a-col :span="12">
                                    <a-button style="background-color: #00CF8C;color: #FFFFFF">获取验证码</a-button>
                                </a-col>
                            </a-row>
                        </a-form-item>

                        <a-form-item>
                            <a-button type="primary" html-type="submit" style="width: 100%">
                                注册
                            </a-button>
                        </a-form-item>
                    </a-form>
                    <!--                    注册页表单结束-->
                    <div class="login" @click="denglu">
                        <span>去登陆</span>
                    </div>
                </a-tab-pane>


            </a-tabs>

        </a-modal>
    </div>
</template>

<script>

    //表单
    const residences = [
        {
            value: 'zhejiang',
            label: 'Zhejiang',
            children: [
                {
                    value: 'hangzhou',
                    label: 'Hangzhou',
                    children: [
                        {
                            value: 'xihu',
                            label: 'West Lake',
                        },
                    ],
                },
            ],
        },
        {
            value: 'jiangsu',
            label: 'Jiangsu',
            children: [
                {
                    value: 'nanjing',
                    label: 'Nanjing',
                    children: [
                        {
                            value: 'zhonghuamen',
                            label: 'Zhong Hua Men',
                        },
                    ],
                },
            ],
        },
    ];
    export default {
        name: "Register.vue",
        data() {
            return {
                confirmDirty: false,
                residences,
                autoCompleteResult: [],
                formItemLayout: {
                    labelCol: {
                        xs: {span: 24},
                        sm: {span: 8},
                    },
                    wrapperCol: {
                        xs: {span: 24},
                        sm: {span: 16},
                    },
                },
                tailFormItemLayout: {
                    wrapperCol: {
                        xs: {
                            span: 24,
                            offset: 0,
                        },
                        sm: {
                            span: 16,
                            offset: 8,
                        },
                    },
                },
            }
        },
        beforeCreate() {
            this.form = this.$form.createForm(this, {name: 'register'});
        },
        methods: {
            dianji(){
                this.$store.commit("registerFT", false)
            },
            denglu(){
                this.$store.commit("registerFT", false)
                this.$store.commit("changeFT", true)
            },
            handleSubmit(e) {
                e.preventDefault();
                this.form.validateFieldsAndScroll((err, values) => {
                    if (!err) {
                        console.log('Received values of form: ', values);
                    }
                });
            },
            handleConfirmBlur(e) {
                const value = e.target.value;
                this.confirmDirty = this.confirmDirty || !!value;
            },
            compareToFirstPassword(rule, value, callback) {
                const form = this.form;
                if (value && value !== form.getFieldValue('password')) {
                    callback('Two passwords that you enter is inconsistent!');
                } else {
                    callback();
                }
            },
            validateToNextPassword(rule, value, callback) {
                const form = this.form;
                if (value && this.confirmDirty) {
                    form.validateFields(['confirm'], {force: true});
                }
                callback();
            },
            handleWebsiteChange(value) {
                let autoCompleteResult;
                if (!value) {
                    autoCompleteResult = [];
                } else {
                    autoCompleteResult = ['.com', '.org', '.net'].map(domain => `${value}${domain}`);
                }
                this.autoCompleteResult = autoCompleteResult;
            },
        },
        computed: {
            visible: {
                get() {
                    return this.$store.state.regisState
                },
                set() {
                }
            }
        }
    }
</script>

<style lang="less" scoped>
    /deep/ .ant-tabs-nav-wrap {
        text-align: center;
    }
    .login {
        margin-top: -20px;
     span {
    float: right;
       }

    }
    .login:hover {
        cursor: pointer;
        color: #00CF8C;
    }
    /deep/ .ant-tabs-tabpane-active {
        margin-left: -6px;
    }
</style>